<template>
  <div class="container-box">
    <!--筛选表单-->
    <div class="filter-form">
      <el-row type="flex" justify="space-between">
        <el-form ref="form" label-width="80px" :inline="true" size="small">
          <el-form-item>
            <el-input ref="input" v-model="queryData.student_name" placeholder="学员姓名" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.subject_id" placeholder="归属学科">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.class_id" placeholder="归属班级">
              <el-option
                v-for="item in classes"
                :key="item.id"
                :label="item.class_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.student_state" placeholder="账号状态">
              <el-option label="待审核" :value="1" />
              <el-option label="正常" :value="2" />
              <el-option label="禁用" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>

        <div>
          <el-button type="warning" plain size="small">批量导入</el-button>
          <el-button type="primary" size="small" plain @click="flag=true">增加学员</el-button>
        </div>

      </el-row>
    </div>

    <!-- 批量操作区域 -->
    <div :class="{active:hightLight===1}" class="checkBox">
      <el-button type="success" size="small">批量启用</el-button>
      <el-button type="warning" size="small">批量禁用</el-button>
      <el-button type="danger" size="small">批量删除</el-button>
    </div>

    <!--表单区域-->
    <div class="table-box">
      <el-table
        border
        :header-cell-style="{ background: '#fafafa', color: '#646464' }"
        :data="list"
        style="width: 100%"
        @selection-change="clickBox"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
        />
        <el-table-column
          prop="student_name"
          label="学生姓名"
          align="center"
          width="120"
        />
        <el-table-column
          prop="student_phone"
          label="手机号"
          align="center"
        />
        <el-table-column
          prop="class_name"
          label="班级名称"
          align="center"
        />
        <el-table-column
          prop="subject_name"
          label="学科名称"
          align="center"
        />
        <el-table-column
          label="性别"
          align="center"
        >
          <template slot-scope="{row}">
            <span>{{ row.student_sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="student_state"
          label="状态"
          align="center"
        >
          <template slot-scope="{row}">
            <el-button v-if="row.student_state===2" type="success" plain size="small">正常</el-button>
            <el-button v-if="row.student_state===1" type="warning" plain size="small">待审核</el-button>
            <el-button v-if="row.student_state===3" type="danger" plain size="small">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建人"
        />
        <el-table-column
          prop="created_at"
          label="创建时间"
          width="160"
        />

        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="200"
        >
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="onEdit(row.id)"
            />
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="onDelete(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页区域-->
    <div class="page">
      <el-pagination
        :current-page.sync="queryData.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        :pager-count="7">
      </el-pagination>

    </div>

    <!-- =============================新增 -->
    <el-dialog
      :title="`${title}学员信息`"
      :visible.sync="flag"
      width="45%"
      @close="onCancel"
    >
      <el-form ref="form" :model="formData" :rules="rules" label-width="100px" :inline="true" size="normal">
        <el-form-item label="归属学科" prop="subject_id">
          <el-select v-model="formData.subject_id" placeholder="归属学科" style="width:200px">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归属班级" prop="class_id">
          <el-select v-model="formData.class_id" placeholder="请确保已选择学科" style="width:200px">
            <el-option
              v-for="item in classes"
              :key="item.id"
              :label="item.class_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学生姓名" prop="student_name">
          <el-input
            v-model="formData.student_name"
            placeholder="请输入学生姓名"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="student_phone">
          <el-input
            v-model="formData.student_phone"
            placeholder="请输入手机号码"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="密码" prop="name">
          <el-input
            v-model="formData.student_password"
            placeholder="默认密码是 姓名+admin88"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="性别" label-width="100px">
          <el-radio v-model="formData.student_sex" :label="1">男</el-radio>
          <el-radio v-model="formData.student_sex" :label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="状态" label-width="100px">
          <el-radio v-model="formData.student_state" :label="1">待审核</el-radio>
          <el-radio v-model="formData.student_state" :label="2">正常</el-radio>
          <el-radio v-model="formData.student_state" :label="3">禁用</el-radio>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button size="small" @click="flag=false">取消</el-button>
        <el-button type="primary" size="small" @click="onSubmit">确定</el-button>
      </el-row>
    </el-dialog>

  </div>
</template>
<script>
import { addStudentsApi, delStudentsApi, editStudentsApi, getClassesApi, getStudentsApi, getSubjectApi, showStudentsApi } from '@/api/class'
export default {
  name: 'StudentsList',
  data() {
    return {
      // 表格数据
      list: [],
      // 查询参数
      queryData: {
        student_name: '',
        class_id: '',
        subject_id: '',
        student_state: '',
        page: 1,
        limit: 10
      },
      total: 0,
      options: [],
      classes: [],
      hightLight: 1,
      // ===================================

      // // 弹框控制变量
      flag: false,
      // // 表单控制变量
      formData: {
        class_id: '',
        created_at: '',
        creator_id: '',
        student_name: '',
        student_password: '',
        student_phone: '',
        student_sex: 1,
        student_state: 1,
        subject_id: ''
      },
      // // 表单验证规则变量
      rules: {
        subject_id: [{ required: true, message: '请输入归属学科', trigger: 'blur' }],
        class_id: [{ required: true, message: '请输入班级', trigger: 'blur' }],
        student_name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
        student_phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '新增'
    }
  },
  async created() {
    this.initData()
    const res = await getSubjectApi()
    // console.log(res)
    this.options = res
    const res1 = await getClassesApi({ page: 1, limit: 100 })
    // console.log(res1)
    this.classes = res1.list
  },
  methods: {
    // 初始化表格数据
    async initData() {
      // 调用API函数获取表格数据
      const res = await getStudentsApi(this.queryData) // 看network
      // console.log(res)
      // 赋值变量
      this.list = res.list// 看vue
      this.total = res.total
    },
    // 筛选表单搜索提交
    onSearch() {
      this.queryData.page = 1
      this.initData()
    },
    // 筛选表单重置
    onReset() {
      this.queryData = {
        student_name: '',
        class_id: '',
        subject_id: '',
        student_state: '',
        page: 1,
        limit: 10
      }
      this.initData()
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.queryData.limit = val
      this.initData()
    },
    // 页码切换事件
    currentChange(val) {
      this.queryData.page = val
      this.initData()
    },
    // // ============================新增
    async onSubmit() {
      // 表单校验
      await this.$refs.form.validate()
      // // 发送请求
      // await addStudentsApi(this.formData)
      this.formData.id ? await editStudentsApi(this.formData) : await addStudentsApi(this.formData)
      // // 消息提示
      this.$message.success('添加成功')
      // this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      // // 关闭弹框
      this.flag = false
      // // 更新列表
      this.initData()
    },
    onCancel() {
      // 表单重置
      this.formData = {
        class_id: '',
        created_at: '',
        creator_id: '',
        student_name: '',
        student_password: '',
        student_phone: '',
        student_sex: 1,
        student_state: 1,
        subject_id: ''
      }
      // 移除校验
      this.$refs.form.clearValidate()
    },
    // ============================修改
    async onEdit(id) {
      // 获取该行数据
      const res = await showStudentsApi(id)
      console.log(res)
      // 赋值给表单变量
      this.formData = res
      // 弹框打开
      this.flag = true
    },

    // ============================删除
    async onDelete(id) {
      await this.$confirm('确定删除吗')
      // 发送请求
      await delStudentsApi({ id: [id] })
      // 信息提示
      this.$message.success('删除成功')
      // 边缘问题，如果不是第1页且该页只有一个删除成功，页码减1再拉取列表
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--
      }
      // 重新拉取表格
      this.initData()
    },
    clickBox(selection) {
      // console.log(selection)
      console.log(selection.length)
      if (selection.length === 0) {
        this.hightLight = 1
      } else {
        this.hightLight = 2
      }
    }
  }
}
</script>
<style scoped>
.container-box{
  padding: 30px;
}

.page {
  margin-top: 20px;
}
.active {
  display: none;
}
.checkBox {
 margin-bottom: 20px;
}
</style>
